<template>
    <div class=" c777 h100">

        <p class="f-fs-16 f-weight f-p-5-0 black">{{ info?.contractName || '-' }}</p>
        <div class="f-p-10-0" v-if="false">
            <el-button type="primary" plain>{{ info.status == 3 ? $t('processDetail.Signed') :
                $t('processDetail.SigningInProgress') }}</el-button>
        </div>
        <div class="f-fs-12 c777 f-p-5-0">{{ $t('processDetail.CreatedOn') }} {{
            getDateTime(Date.parse(info?.csR_CreateTime))[11] }}</div>
        <div class="f-fs-12 c777 f-p-5-0">{{ $t('processDetail.LastModifiedOn') }} {{
            getDateTime(Date.parse(info?.updatedDate))[11] }}</div>


        <div class="process-box">
            <p class="f-fs-16 f-weight f-p-10-0 black">{{ $t('processDetail.Process') }}</p>

            <div>
                <div class="f-p-10-0 black">{{ $t('processDetail.InitiateContract') }}</div>
                <div class="content">
                    <div class="f-p-10-0">{{ $t('processDetail.Initiator') }}：</div>
                    <div class="f-1">
                        <p class="f-p-10-0 black f-weight">{{ info?.createLastName }}{{ info?.createFirstName }}</p>
                        <p class="f-p-10-0">ip：{{ info?.ipAddress || '-' }}</p>
                        <p class="f-p-10-0">{{ getDateTime(Date.parse(info?.csR_CreateTime))[11] }}</p>
                    </div>
                </div>
            </div>

            <div>
                <div class="f-p-10-0 black">{{ $t('processDetail.Sign') }}</div>
                <div class="content" v-for="(item, index) in info?.contractSignProcessItems" :key="index">
                    <div class="f-p-10-0">{{ item.signSequence == 1 ? $t('processDetail.Lessor') :
                        $t('processDetail.Lessee') }}：</div>
                    <div class="f-1">
                        <p class="f-p-10-0 black f-weight">{{ item.signName }}</p>
                        <p class="f-p-10-0" v-if="item.isSign">ip：{{ item.ipAddress || '-' }}</p>
                        <p class="f-p-10-0" v-if="item.isSign">{{ getDateTime(Date.parse(item.creationDate))[11] }}</p>
                    </div>
                    <div class="f-p-10-0 f-weight" :class="item.isSign ? 'green' : 'orange'">{{ item.isSign ?
                        $t('processDetail.Signed') :
                        $t('processDetail.NotSigned') }}
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<script setup>
import { getStore, isLoginFun, getDateTime } from '@/utils/utils';

defineProps({
    info: Object
})
</script>

<style scoped lang="scss">
.content {
    display: flex;
    justify-content: space-between;
    background-color: #F4F4F4;
    padding: 10px;
    // border-radius: 5px;
}

.process-box {
    height: calc(100% - 10rem);
    overflow-y: auto;
}
</style>
